<template>
    <div class="wrap">
         <!-- 数字动画一 -->
           <!-- <div class="number-wrap" @click="count">
            <text ref="number" class="number">{{number}}</text>
        </div> -->
        <!-- 数字动画二 通过生成一系列数字并进行位移变化产生的动画效果 -->
        <div class="number-wrap-two" @click="reset">
            <div ref="number" >
                <text class="number" v-for="(number,index) in numbers" :key="index" >{{number}}</text>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .wrap {
        align-items: center;
        justify-content: center;
    }

    /* 
    数字动画一
    .number-wrap {
        width: 200px;
        align-items: center;
        overflow: hidden;
    }

    .number {
        font-size: 56px;

    } */
    /* 数字动画二 */
    .number-wrap-two {
        width: 200px;
        height: 100px;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }

    .number {
        height: 100px;
        font-size: 90px; 
    }


</style>
<script>
const animation = weex.requireModule('animation');
export default {
    data(){
        return{
            number:0,
            numbers:[]
        }
    },
    created() {
        var vm = this;
        for (let i = 0; i < 100; i++) {
            vm.numbers.push(i);
        }
        setTimeout(() => {vm.count()},100);
    },
    methods:{
        reset(){
            var vm = this;
            var number = vm.$refs.number;
            animation.transition(number,{
                styles: {
                    transform:'translateY(0px)'
                },
                duration: 1000,
                timingFunction: 'ease-in-out'
            })
        },
        count(){
            var vm = this;
            // 数字动画一 最简单的数字动画
            // vm.number++;
            // if (vm.number < 100) {
            //     setTimeout(() => {
            //         vm.count();
            //     },100)
            // }
            // 数字动画二 通过生成一系列数字并进行位移变化产生的动画效果
            var number = vm.$refs.number;
            animation.transition(number,{
                styles: {
                    transform:'translateY(-9900px)'
                },
                duration: 1000,
                timingFunction: 'ease-in-out'
            },function(){
                animation.transition(number,{
                    styles:{
                        transform: 'translateY(-9890px)'
                    },
                    duration: 100,
                    timingFunction: 'ease-in-out'
                },function(){
                    animation.transition(number,{
                        styles:{
                            transform: 'translateY(-9900px)'
                        },
                        duration: 500,
                        timingFunction: 'ease-in-out'
                    })
                })
            })
        }
    }
}
</script>
